<template>
  <div>
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="bread" id="bread">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <transition-group name="breadcrumb">
        <el-breadcrumb-item
          v-for="(item) in breadArr"
          :key="item.path"
          class="linkBreadItem"
          >
          <span class="linkBread">{{item.name}}</span>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script>
import { findPathByLeafId } from "@/utils/index.js";
export default {
  data() {
    return {
      breadArr: []
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        let tempArr = findPathByLeafId(
          newVal.path,
          this.$store.state.routerTree
        );
        this.breadArr = tempArr;
      }
    }
  },
  methods: {}
};
</script>

<style scoped>
.bread{
  position: relative;
  display: inline-block;
}
.breadcrumb-enter-active { animation: enterIn 0.6s; } 
.breadcrumb-leave-to{ transition: .5s;}
.breadcrumb-enter{
  opacity: 0;
  position: absolute;
  right: -30px;
  transform: translateX(30px);
  /* position: absolute;
  right:  0; */
}
.breadcrumb-leave-to{
  opacity: 0;
  position: absolute;
  right: -30px;
  transform: translateX(30px) ;
  /* transform: translateX(30px); */
  /* position: absolute;
  right: -30px; */
}
@keyframes enterIn {
    0% {opacity: 0;}
    50%{opacity: 0; }
    100%{opacity: 1;}
}
</style>